<template>
  <el-form :model="detailForm" v-loading="loading" class="elForm">
    <el-card shadow="never" class="box-card">
      <div slot="header" class="header-card">
        <span class="header-card-title">上牌信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="验车费用:">
            <span>{{ format_thousand(detailForm.checkCarPrice) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上牌费用:">
            <span>{{ format_thousand(detailForm.registerPrice) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="拍照邮寄费用:">
            <span>{{ format_thousand(detailForm.photoMailPrice) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="是否限牌城市:">
            <span v-if="detailForm.isLimitCity === 1">是</span>
            <span v-if="detailForm.isLimitCity === 2">否</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="detailForm.isLimitCity === 1">
          <el-form-item label="指标所属城市:">
            <span>{{ detailForm.indexBelongCity }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="detailForm.isLimitCity === 1">
          <el-form-item label="指标类型:">
            <span v-if="detailForm.indexType == 1">燃油</span>
            <span v-if="detailForm.indexType == 2">新能源</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="付款类型:">
            <span v-if="detailForm.payType === '1'">支付车管</span>
            <span v-if="detailForm.payType === '2'">报销</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-form-item label="备注:">
            <span style="margin: 0">{{ detailForm.remark }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="box-card">
      <div slot="header" class="header-card">
        <span class="header-card-title">牌照信息</span>
      </div>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="车牌号:">
            <span>{{ detailForm.carNo }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="上牌时间:">
            <span>{{ detailForm.licensePlateTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="车辆登记证:">
            <image-common v-model="detailForm.registerUrl" :disabled="true"  :upType="2"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行驶本:">
            <image-common v-model="detailForm.driveBookUrl" :disabled="true"  :upType="2"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-card>
  </el-form>
</template>

<script>
import { getSpCarId } from "@/api/zcwh/vehicleFilesaApi.js";
import { getToken } from "@/utils/auth";
import updataFile from "./updataFile.vue";

export default {
  name: "spxx",
  components: { updataFile },
  props: ["carId", "dataObj"],
  data() {
    return {
      payTypeList: [
        { value: "1", label: "车管垫付，走报销，月结" },
        { value: "2", label: "公对公" },
      ],
      limitCity: [
        { value: 1, label: "是" },
        { value: 2, label: "否" },
      ],

      isForm: false,

      loading: false,
      detailForm: {},
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getSpCarId();
  },
  methods: {
    getSpCarId() {
      this.loading = true;
      getSpCarId(this.carId)
        .then((res) => {
          if (res.code === 200) {
            const { data } = res;
            this.isForm = true;
            this.loading = false;
            this.detailForm = data || {};
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>


<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";
</style>
